import { useState, useEffect } from 'react';
import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/solid';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import './HomeCalendar.less';

dayjs.locale('zh-cn');

const HomeCalendar = () => {
  const [displayDate, setDisplayDate] = useState(dayjs());
  const today = dayjs();
  const todayDate = today.date();
  const [currentTime, setCurrentTime] = useState(today);
  const [currentDate, setCurrentDate] = useState(today);

  useEffect(() => {
    const timer = setInterval(() => {
      const now = dayjs();
      setCurrentTime(now);
      setCurrentDate(now);
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  // 切换月份的函数
  const handlePrevMonth = () => {
    setDisplayDate(displayDate.subtract(1, 'month'));
  };

  const handleNextMonth = () => {
    setDisplayDate(displayDate.add(1, 'month'));
  };

  const renderSimpleCalendar = () => {
    const daysInMonth = displayDate.daysInMonth();
    const firstDayOfMonth = displayDate.startOf('month').day();
    const weeks = [];
    let day = 1;

    for (let i = 0; i < 6; i++) {
      const days = [];
      for (let j = 0; j < 7; j++) {
        if ((i === 0 && j < firstDayOfMonth) || day > daysInMonth) {
          days.push(<td key={`empty-${i}-${j}`} className="calendar-day-empty"></td>);
        } else {
          const isToday = day === todayDate && 
                         displayDate.month() === today.month() && 
                         displayDate.year() === today.year();
          days.push(
            <td 
              key={day} 
              className="calendar-day"
            >
              <span className={`calendar-day-number ${isToday ? 'calendar-day-today' : ''}`}>
                {day}
              </span>
            </td>
          );
          day++;
        }
      }
      weeks.push(<tr key={i}>{days}</tr>);
    }
    return weeks;
  };

  return (
    <div className="home-calendar">
      <button onClick={handlePrevMonth} className="calendar-nav-button calendar-nav-prev">
        <ArrowLeftIcon className="calendar-nav-icon" />
      </button>
      <button onClick={handleNextMonth} className="calendar-nav-button calendar-nav-next">
        <ArrowRightIcon className="calendar-nav-icon" />
      </button>
      
      <div className="calendar-header">
        <ul className="calendar-time-list">
          <li className="calendar-time">
            {currentTime.format('HH:mm:ss')}
          </li>
          <li className="calendar-date">
            {currentDate.format('YYYY年M月D日 dddd')}
          </li>
        </ul>
      </div>
      
      <div className="calendar-body">
        <ul className="calendar-content">
          <li className="calendar-month">
            {displayDate.format('YYYY年M月')}
          </li>
          <li className="calendar-table-container">
            <table className="calendar-table">
              <thead>
                <tr className="calendar-weekdays">
                  {['日', '一', '二', '三', '四', '五', '六'].map((day) => (
                    <th 
                      key={day} 
                      className="calendar-weekday"
                    >
                      {day}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody className="calendar-days">
                {renderSimpleCalendar()}
              </tbody>
            </table>
          </li>
        </ul>
      </div>
    </div>
  );
};

export default HomeCalendar; 